<template>
  <div class="choose-customer">
    <a-button type="primary" @click="visible = true">选择客户({{ checkResult.length }})</a-button>
    <!-- 弹窗 -->
    <a-modal v-model:visible="visible" :maskClosable="false" :keyboard="false" :closable="true" :footer="null" title="选择客户" width="1200px">
      <div class="choose-content">
        <div class="opeartion-content">
          <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
          <div class="table-content">
            <super-table
              height="500"
              ref="tableRef"
              v-model:page="searchForm.pageNum"
              v-model:limit="searchForm.pageSize"
              :loading="loading"
              :data="tableData"
              :total="searchForm.total"
              :column="tableColumn"
              @change-page="getData"
              :checkbox-config="{ checkMethod: checCheckboxkMethod }"
            >
              <template #tool>
                <a-button type="primary" @click="addHandle">添加</a-button>
              </template>
            </super-table>
          </div>
        </div>
        <div class="result-content">
          <div class="header">
            <span>
              已选客户: <span>({{ checkResult.length }})</span></span
            >
            <span @click="removeAllHandle">全部移除</span>
          </div>
          <vxe-table border show-overflow height="650" :data="checkResult" :scroll-y="{ enabled: true, gt: 30 }">
            <vxe-column field="customerShortName" title="客户简称" min-width="140"></vxe-column>
            <vxe-column field="action" title="操作" min-width="70">
              <template #default="{ rowIndex }">
                <a-button @click="removeHandle(rowIndex)" type="link" danger>移除</a-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div class="operation-btn">
        <a-button type="primary" @click="submitHandle">保 存</a-button>
        <a-button @click="visible = false">关 闭</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList, tableColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
import { cloneDeep } from "lodash";
const props = withDefaults(
  defineProps<{
    value: Array<Base.GeneraDataType>;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:value", state: Array<Base.GeneraDataType>): void;
}>();
const { value } = toRefs(props);
const { loading } = TableHeightHook(0);
const { searchForm, tableData, tableRef, keyWord, checkResult, visible } = InitHook();
const { searchHandle, getData, removeHandle, addHandle, removeAllHandle, checCheckboxkMethod, submitHandle } = OperationHook({
  searchForm,
  tableData,
  tableRef,
  loading,
  keyWord,
  checkResult,
  emit,
  visible
});
const init = () => {
  searchHandle();
  checkResult.value = cloneDeep(value.value);
};
watch(
  () => value.value,
  () => {
    checkResult.value = cloneDeep(value.value);
  }
);
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      tableRef.value.xTable.clearCheckboxRow();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.choose-content{
    display: flex;
    .opeartion-content {
        flex: 1;
        .table-content{
           margin-top: 16px;
        }
        .btn-content {
            padding-left: 8px;
            :deep(.el-button) {
              width: 45%;
            }
        }
    }
    .result-content {
        width: 230px;
        padding: 0 8px;
        margin-left: 16px;
        border-left: 1px solid #ccc;
        .header {
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            margin-bottom: 8px;
            > span:nth-child(1) {
                color: #0045a3;
            }
            > span:nth-child(2) {
                color: red;
                cursor: pointer;
            }
        }
        .choose-list {
            .choose-item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                > span:nth-child(1) {
                    flex: 1;
                }
                > span:nth-child(2) {
                    color: red;
                    cursor: pointer;
                    width: 28px;
                    margin-left: 4px;
                }
            }
        }
    }
  }
.operation-btn{
  text-align: right;
  margin-top: 24px;
  :deep(.ant-btn-primary) {
    margin-right: 16px;
  }
}
</style>
